<template>
  <div class="app-container">
    <p>近一个月类目销售排行（销售金额累计TOP20）</p>
    <div class="chart-wrapper-box">
      <el-table
        :header-cell-style="{'text-align':'center'}"
        :cell-style="{'text-align':'center'}"
        :data="lmxsData"
        border
        style="width: 100%"
        v-loading="lmxsloading"
      >
        <el-table-column prop="index" label="序号" width="50">
        </el-table-column>
        <el-table-column prop="categoryName" label="类目"></el-table-column>
        <el-table-column prop="orderNumber" label="订单数"/>
        <el-table-column prop="saleNumber" label="销售金额"/>
        <el-table-column prop="profitAmount" label="利润"/>
        <el-table-column prop="profitRate" label="利润率"/>
      </el-table>
      <pagination
        v-show="lmxstotal>0"
        :total="lmxstotal"
        :page.sync="lmxsParams.pageNum"
        :limit.sync="lmxsParams.pageSize"
        @pagination="getHeadOfficeCategoryIdSaleRankingMonthData"
      />
    </div>
  </div>
</template>

<script>
import {HeadOfficeCategoryIdSaleRankingMonthData} from "@/api/index";

export default {
  name: "categoryData",
  data() {
    return {
      lmxsData: [], // 近一个月类目销售排行（销售金额累计TOP20）
      lmxsloading: false,
      lmxstotal: 0,
      lmxsParams: {
        pageSize: 10,
        pageNum: 1
      }
    }
  },
  created() {
    this.getHeadOfficeCategoryIdSaleRankingMonthData()
  },
  methods: {
    // 近一个月类目销售排行（销售金额累计TOP20）
    getHeadOfficeCategoryIdSaleRankingMonthData() {
      this.lmxsloading = true;
      HeadOfficeCategoryIdSaleRankingMonthData(this.lmxsParams).then(res => {
        this.lmxsData = res.records;
        this.lmxstotal = res.total;
        this.lmxsloading = false;
      })
    },
  }
}
</script>

<style scoped>

</style>
